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SAVES cye@m = lag structure 


HTML TAG/ATTRIBUTE SYNTAX 


<tag attribute="value'> content </tag> 





Devel sneacecm HT iViL main structure 
WANTS a PAN Gh 

42 siies HTML5 document 
a iocainiieit content root tag 
metadata header related docs 
page content visible content 


CMC) WN forall elements 
DOM / STYLE ATTRIBUTES 
F3 element identifier unique per page 
SEES element class multiple per page 
Ea element slot reference to 
inline CSS styles css properties 
GLOBAL ATTRIBUTES 
shortcut key to focus 
allow edit element 
| dir | text direction 
enable drag and drop 
Cieteim hide element not relevant 
is | custom built-in elem 
ir set content lang en, es, fr... 
/nonce | whitelist script/style [csp] 
Bleitea disable grammar check 
set element order 
ERY set tooltip text mouse hover 
Peiearicl pie ul) disable translation 
custom metadata on element 
HINT TO BROWSER 


virtual keyb label 


MICRODATA ATTRIBUTES 


FiGines set global urn unique identifier 
new metadata item 

set microdata genre url 

| itemref. set reference to "id" 


set property & value 


Ss Titers iem CSS inline 


INLINE STYLES 


embed css style in a document 
FTE set title to stylesheet set 
type hint type for browser 
<LINK> <SOURCE> <STYLE> 


Riley apply to specific devices 
Ell] all devices computers, mobiles... 
printables devices 
all devices - (print + speech) 
devices that read a page 


CHEATSHEET LEGEND 


|html tag | html tag w/o close tag 
attribute ff attribute w/o value 
default value 









seo document title 
set a document base url 
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olor muacericms For social networks 
WANG = ={010) @e) =) 5\ Kej2y\>) a | 
metadata tag for open graph 


metadata type open graph 
fins metadata value open graph 


ous aiche@s Dev annotations 
HTML COMMENT SYNTAX 


<!-- text without effects on webpage --> 


ai a(:y-(eme-leem Header & document metadata 
RELATIONS 
document relation 
link to related document 
| hreflang| doc language en, es... 
hint type for browser 
[iE set title to stylesheet set 
E28 hint size for favicon 64x64, 96x96 
Fel relation type with other document 


title of your object 
type of your object 


image url for preview 
canonical & absolute url 


complementary audio url 
1-2 sentence descr. 
word auto, the, a, an, ... 
language default: en_US 
others lang array 
general site name 
complementary video url 


link to alternate version 
link to author URL 
link to help URL 
link to favicon URL (tab icon) 
fetch module map 
link to pingback server 
link to search page url 


‘i TWITTER CARDS 
imports a css style sheet 


metadata tag for twitter cards 
friicy metadata type twitter cards 


link to preferred URL Felicia metadata value twitter cards 


prev part URL of series doc 


next part URL of series doc title of your object 


type of your object 
resolve dns domain 
pre connect to domain 
fetch/cache link for future 
fetch/cache link for now account site name 
fetch module map account name @manz 
description 
script absolute image url 


background render page 


country code 
name of app 
identifier of app 
url of app store 
id for **** 


DOCUMENT METADATA 


document metadata 
| charset. encoding utf-8, iso-8859-1... 
ris name of metadata 
short webapp name 
name of the page's author 
seo page description 
software used to build web 
comma-separated tags 
default page referrer policy 
primary theme css color 
hint to initial size viewport 
pragma directive (legacy) 
legacy alt. to charset 
default stylesheet set 
html redirect 10; URL=file.html 
better compat !E=edge 
enforce csp 


feyicue metadata value 


https url to iframe player 
GOOGLE SEO RECOMMENDATIONS 
first - second | brand 50-60 chars 
metadata google-supported 
fri) metadata name 
text snippet 50-160 chars 
set bots behaviour 


disable google features 


exclude secure search 
optimized-mobile page 
content="width=device-width, initial-scale=1.0" 


Enezeta taal 





link to base url to use 
| target | place to open link 
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waaesiicm Forms related tags 
MAIN ELEMENTS 


form elements collection 
Eriicy form name document.forms api 


Gece esd Ges EER] send method 
Efi url to backend form submission 


Ett ieirieca le! force encoding utf-8 
PMmictssiyiacy Gal! autofill for all form 
bypass form validation 
Fela eas place to put response 


application/x-www-form-urlencoded 
multipart/form-data encoding type 


associate element with caption 
[a reference to [ft Jof related element 


GROUP FORMS 


group of form elements 
rt element name forms.elements api 
associate fieldset with a form 
avoid select this group items 
caption text for fieldset 





| Input elements 
USER INPUT DATA 


User input types 













specific & large text 
Erte element name form.elements api 


Pmt sled ke ai autofill for input 


EMcieatem focus input when loaded 
Cinreiicy submit element directionality 


fr) associate input with a form 
MEte-\ere)(e(-1a) User visual hint 
<INPUT> 


| specific text input short text 


Td ge Sc 
number [range [color [file [password 
[datetime-local] date] time | week] month 
[checkbox [radio [submit image reset [button 


RAY current value of input element 
E23 size of element in characters 
(Sa associate with IC] of 
Etta hint for expected file in upload 
Ritecem enable in radio or checkbox 
fiuycM allow multiple values 

<INPUT> 
FE url or name of image button 
Elid alternative text to image 


Mts Gels image width/height size 


<TEXTAREA> 


multiline text input large text 
Fete tee number of lines and columns 


ie) wrap text 
<INPUT> & <BUTTON> 


| formaction | formtarget | formnovalidate 
formenctype | formmethod 


attributes to alter main form submission 






























eu actecm Ruby Markup tags 
RUBY ELEMENTS 


ruby annotation E.Asian-like chars 


ruby fallback parenthesis wrapper 
ruby text pronunciation, translation... 





S Select data tags 
SELECT ELEMENTS 


B Generic Button 
HTML GENERIC <BUTTON> 


DM bY =Ve) g-ler-1creme-teesme Obsolete elements 
DEPRECATED TAG 
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Ciel emelecm™s Other elements 
OTHER FORM ELEMENTS 

result of calculation 
Eri element name forms.elements api 
fr) associate input with a form 
associate result to other element 

show a bar progress 

R2ey current value of bar progress 
firea max value of bar progress 

show a known range meter 
KZICtY current value of meter 
[ie limit of low range 
Citi limit of high range 
Eitus lower bound of range 
fies@ upper bound of range 
Pe Optimum value in gauge 

OTHER INTERACTIVE ELEMENTS 

disclosure widget him! accordion 

Eu keep accordion opened 
caption or title for 
window box container dialog box 


Eun keep dialog opened 


AVAMYE Ie Fe hitelats 
USER INPUT DATA 


Interactive combo 


form elements collection 
Eriucey form name document.forms api 
fr) associate input with a form 
F243 size of element in characters 


Mmicrtsiy iicy lus autofill for input 

EMcicetcm focus input when loaded 

| avoid press button 

required field default: optional 

fiiustw allow select multiple values 
predefined and open data list 


item from or 
[FETT user-visible text instead content 
KZ item value for form submit 
options selected by default 
| avoid select this item option 

group of 

[ETYSI user-visible group text 
| avoid select this items 


HTML Button 
HTML validations 


generic button container 
friicy element name form.elements api 
BTS BE sss Eh button type 
RZitt) button value for form submission 
fy) associate input with a form 
EMiciestem focus button when loaded 
avoid press button 


<INPUT> <TEXTAREA> 


fee ich; min/max length 
<INPUT> <TEXTAREA> 
required field default: optional 
avoid edit field not send 
avoid edit field send 
<INPUT> 
fi fiee@ min/max value number 
Ei) granularity step between values 
<INPUT> 


PEW GEIS) pattern for test validation 





RECOMMENDED TAG 








java widgets 
abbreviation 
main font use CSS instead 
bigger text use CSS font-size 
background sound 
flicker text use CSS animation 
center text use CSS text-align 
directory list use lists instead 
set font features use CSS instead 
frames 
move text use CSS animation 
col layout use CSS columns 
frames fallback no supported 
search in page 
keypair gen use webcrypto AP! 
preformatted text 
context menu no supported 
auto id generated no supported 
no break use CSS instead 
no embed fallback 
plain text fragment 
ruby base & container 
whitespace use CSS instead 
strikethrough text 
teletype text use CSS instead 
code block use &t; 







OANA EWN liiccm Accesible elements 
ACCESIBLE RICH INTERNET APPLICATIONS 
[II specify accessible role for element 
complementary lst |istitem) main navigation 
region [tab]alert [application [article banner 
[button| cell [checkbox [contentinfo [dialog 
[document] feed [figure] form [ord] gridcell 
heading] mg [listbox row [rowaroup [search 
[switch [table [tabpanel [textbox timer 
true | false | mixed | 
set current state 















specify a string as label 
PMieeelcioa specify [J as label elem 









Plieesvus set [EJ element as child 

set [JJ as active 
set [J as description 
specify position in set 
specify size of set 


Enezeta taal 
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CRC Colt mclerm Block elements 
GENERAL GROUP TAGS 


generic division or layer block 
text paragraph 
thematic break 
preformatted text 
dominant contents 
section with quote 
C3 link to url with quotation source 


LISTS & TERMS 
unorderer & orderer list 
Bet first value of list 
backwards list 
AYN GD kind of marker 
item from or list 
RAY ordinal value of item 
description list container 
description term name & value 


FIGURE & CAPTIONS 


figure or concept 
caption or legend for figure 


SEMANTIC TAGS 


entity content post, comment... 
thematic group of content 
section with navigation links 
secondary content sidebar, menu 
eel heading section 
introductory header group 
section footer group 
contact information group 








PE\e(ceclecm labular data 
TABLE ELEMENTS 
table container 
title of table optional 
table header includes headers 
table body includes body data 
table footer includes summary 


f col & group of columns 
EE) number of columns to span 


table row horizontal container 
table header & table cell data 
ETE number of columns to span 


Eels) number of rows to span 


one or more [Jof 
<TH> 


/scope | auto |row | col | rowgroup | colgroup | 
Elia short abbreviated description 


Target destination 
KEYWORDS & TARGET DESTINATION 
feta browser destination 
Md current place same page 
Eva new place new tab page 


Wytoue parent place else _self 
Ey root parent place else _self 


freiicy custom place iframe or other 









HYPERLINKS & AREA MAP 





elements 
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Inline elements 
TEXT SEMANTIC TAGS 
emphatized text replace for 
important text replace for 
highlight text replace for 
alternate voice/mood legacy tag 
span w/o extra purposes legacy tag 
non-textual data span legacy tag 
subscript and superscript 
side comments smal! print 
math or programming variable 
sample from computing system 
user input (keyboard shortcut) 
defining instance of a term 
Fie full term optional 
abbreviation or acronym 
ETI expansion of abbreviation optional 
title of a work book, film, song... 
quoted group from another source 
ficl link to source url optional 
| line break visual enter 
| line break opportunity long words 
no longer accurate/relevant strike text 
associate machine-data to text 
NZ machine-readable value 
associate machine-date to date 
machine-readable date-time 
fragment of computer code 


H ah saluLem Link to another resource 


| hyperlink / image map area 
(tau link to url or filename 

(ued fl) doc language en, es... 
download name empty valid 


rel [alternate Jauthor [bookmark external help, 


license | prev [next | search |tag | opener [nofollow 
noopener noreferrer 


Fel fig fees place to open link 


find url list space-separated to ping 
referrerpolicy referer behaviour 


<AREA> 
Ea eg Ee 
erie) coords list for shape 
El replacement text when no images 


Seziactcm Edit elements 
ae > @ eS Ny om yen) 
addition or removal from doc 
icy link to source quotation optional 
date/time of change optional 


STH mera ECit elements 
<IMG>, <VIDEO>, <AUDIO>, <LINK> or <SCRIPT> 


CORS support 

set how referer works 
‘same-origin Jorigin | strict-origin |unsafe-url 
strict-origin-when-cross-origin 


POLICIES 








Ma lutte(mctetm Picture content 
Ne] hs 


image simple or legacy fallback 
FE link to url image source required 
EVa alternative text if no image required 
Pielas Gittins horizontal & vertical size 
set lazy loading strategy 
Em browser decides 
candidate for lazy loading 
load right away 
(eee name of image map to use 
[Srl image is part of server-side map 
Bid ESi EX hint to decode 
image map used w/ &f 
flu) imagemap used in PEGE Ss 
NEXT-GEN IMAGES 
multiple image container 
new alternative source image 
Ed link to url image source simple mode 
MIME type optional 
fitiey media query of resource media 


PICTURE <SOURCE> <IMG> 


Ec image list candidates comma-sep 
Eiclun a1.jpg 300w, a2.jpg 600w. ... 
b1.jpg 1x, b2.jpg 2x, ... 

E259 final rendered width list 640w 





M Multimedia tags 
VIDEO OR AUDIO CONTAINER ELEMENTS 


[mPa] weem [neve] AVI 
media container 
FE link to url video audio source 
hints how much buffering needs 
Em browser decides 
fetch metadata only 
ffi) save bandwidth and no download 
autoplay only if user interact 
[ey restart when finished 
fiicell silence media by default 
ice show play, pause... controls 
<VIDEO> 


Flea cover image prior to playback 


< VIDEO 
< AUDIO 


Miele Gitsteiie horizontal & vertical size 
MENA browser try play video inline 


VIDEO OR AUDIO CHILDREN ELEMENT 


new alternative source media 
Ed link to url media source 
MIME type video/mp4; codecs="..: 
external subtitles or tracks 
FE link to url subtitle resource 
Erin) language of the text track 
[Fly user-visible name of the text track 


kind | subtitles [eaptions| descriptions 


chapters [metadata 
set default enabled track 


Enezets Gl 
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We sineyeve(e(stemecletm External content 

EXTERNAL CONTENT (IFRAME) 

embeded content 
EX link to url resource website, file, ... 
Ely) document content html! syntax 
Eriicy name context for Fei tg attribute 
| loading | auto lazy load iframe 
allow iframe fullscreen 
allow payments 
Pies itt horizontal & vertical sizes 


<IFRAME> 


allow access to feature 


referer behaviour 


| =e7 You A 1",|=]=10)(0) = 5] on me yer 
external non-html content 
Fi link to url resource 
type of embedded resource 
Mielus little horizontal & vertical sizes 
external resource multipurpose 
EFTey link to url resource 
type of embedded resource 
friucy name context for Ferg attribute 
(eee name of image map to use 
associates element with form [EJ 
Miele little horizontal & vertical sizes 
external resource multipurpose 
Grice KAW name & value of parameter 
EXPERIMENTAL TAGS 
guest embedded content ~iframe 
Ed link to url resource website, file, ... 


referrerpolicy referer behaviour 


SMM (CRe-laitsm Scalar Vectorial Graphics 
POWERFUL PATHS 
define a outline of a shape 
[J command/coords space-separated 
total length of the path 


(YES Move to 
PAE Close path 


path begins - M10,30 
path ends - Z 

draw line - L90,90 
horizontal line - H40 
vertical line - V20 
C30,90 25,10 50,10 
S70,90 90,90 
Q90,60 50,90 


TE Line to 
(GY Horiz line to 
WRF Vert line to 
(E39) Cubic Bézier 
SJB smooth C. B. 
fe) E Quadratic Bézier 
Ga Ee SmoothQ.B. 1T30,0 30,0 30,0 30,0 





NEG Elliptical Arc A20,200,0,1 50,30 


Swecy(¢e-letme Scalar Vectorial Graphics 
MAIN TAGS 


svg container standalone svg 


RC GET viewport size 
preserveAspectRatio 


related group container 


ETIES short text title alternative 
detailed textual information 
metadata elems. container 


referenced elements container 
set reuse template no render 
TEES reference another element reuse 

a url link to be cloned for rendering 
reference another element 


direct child of 
BASIC SHAPES 
define a rectangle 
E407 horizontal & vertical position 
Piel fitstia horizontal & vertical sizes 
(4 67 horizontal & vertical radius 
Parry define a circle 
(S677 horizontal & vertical center coord 
f radius of the circle 
EAE define a ellipse 
(4 67 horizontal & vertical radius 
CS 677 horizontal & vertical center coord 
define a line segment 
Ea a start point (x,y) of line segment 
Ef) end point (x,y) of line segment 
total length of the path 
line / closed shape 
flyin) set of coords space-separated 
total length of the path 


TEXT & IMAGE ELEMENTS 


text layer & text container 
Ea0d start position of text 
Cf relative position of descendant 
lengthAdjust | spacing 
ocics rotate degrees per glyph 
length per glyph 

put text on path 
fFiul equivalent of EJ attribute 
[iad url reference to 
offset from start path 
|method | align how render glyph 
| spacing | exact | space between glyph 
ETA Ea side of the path to render 
lengthAdjust | spacing 
length per glyph 

set reference to image 
a url link to image to rendering 


preserveAspectRatio 
CORS support 
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STodiiivemeletcm Javascript elements 
SCRIPTING ELEMENTS 
include dynamic script 
EX link to script.js instead inline script 
associate fieldset with a form 
javascript file default .js 
JSON data block file .json 
javascript module module .mjs 
fallback for old browsers 
defer script execution 
exec script when available 


referrerpolicy referer behaviour 
CORS support 
verify integrity hash of FR file 


@HTMLPARSE @FETCH @EXEC 








Ohitmeredieliiemelecm Javascript elements 
JAVASCRIPT-RELATED TAGS 
show if no scripting enabled 
inert html fragments to clone 
create separate DOM trees 
fries name of shadow tree slot 
rendering graphs, art, etc... 
Miers Ciena horizontal & vertical size 
user custom element tag 


SE ee Nite Style SVG attributes 
STYLE SVG ATTRIBUTES 


fill | black | fills shape with a color 
fill-rule | nonzero | algorithm inside 
fill-opacity | 1 | alpha channel 


stroke |none | 
stroke-width | 1 | 
stroke-opacity | 1 | 
















set color line 
set width line 
alpha channel 
limit type 


stroke-linecap | butt, 
stroke-linejoin | miter| 
stroke-miterlimit| 4 | 
stroke-dasharray | none | 
stroke-dashoffset | 0 


limit on ratio 
pattern 
array offset 


apply transform 
ESS Eo html attributes inherit 





